<template>
  <div id="nav_app">
      <el-menu
        class="el-menu-vertical-demo"
        background-color="#ff5a3b"
        text-color="#fff"
        active-text-color="#fff"
        router
      >
        <el-menu-item :index="'/home'">
          <i class="el-icon-s-home" style="color: #fff;"></i>
          <span slot="title">管理中心</span>
        </el-menu-item>
        <el-submenu :index="nav.id+''" v-for="nav in nav_list" :key="nav.id">
          <template slot="title">
            <i class="el-icon-setting" style="color: #fff;"></i>
            <span>{{nav.title}}</span>
          </template>
          <el-menu-item :index="n.url" v-for="n in nav.children" :key="n.id">{{n.title}}</el-menu-item>
        </el-submenu>
      </el-menu>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
    created(){
        this.navListMutations()
        console.log(this.$store.state.nav_list);
    },
    computed:{
        ...mapState(['nav_list']) 
    },
    methods:{
        ...mapMutations(['navListMutations'])
    }
}
</script>

<style>
is.active{
  background-color: #ff5a3b !important;
}
</style>